Creating your own reusable, encapsulated HTML elements using native browser standards.
Web Components are a set of native browser standards for building reusable elements without a framework. Custom Elements let you define your own tag (the name must contain a hyphen, like <user-card>) by extending HTMLElement and registering it with customElements.define. Shadow DOM provides encapsulation, so the component's internal markup and styles don't leak out or get overridden by the page, and HTML templates with <template> and <slot> define reusable structure and content projection.
Custom elements have lifecycle callbacks such as connectedCallback, disconnectedCallback and attributeChangedCallback, which let them react to being added to the page, removed, or having observed attributes change. Interviewers often ask how Web Components compare to React or Vue components: they are framework-agnostic and built into the browser, but offer less tooling for state management and rendering. Understanding open versus closed shadow roots and how styling crosses the boundary through CSS custom properties and ::part is a good advanced differentiator.
What you'll walk away knowing